/* 
    向网路发送请求的方法可以通过如下方式
    ajax:XMLHttpRequest
    fetch
    axios
*/
window.addEventListener('DOMContentLoaded',async()=>{
    let ary=await fetchAllMoviesApi()
    console.log(ary);
    renderAllMovies(ary)
})

const renderAllMovies=ary=>{
    let ary1=ary.map(item=>
        `<div class="box-item">
            <div class="box-item-1">
                <img src="${item.posterSrc}">
            </div>
            <div class="box-item-2"></div>
         </div>`
    )
    //将数组转换成字符串
    let result=ary1.join("")
    //将新产生div添加到.box盒子中
    document.querySelector(".box").innerHTML=result
}
/* 
    js异步编程的方式
    回调函数
    Promise
    async/await
    生成器
*/
const fetchAllMoviesApi=()=>{
    return new Promise((resolve,reject)=>{
        //创建XMLHttpRequest对象
        const xhr=new XMLHttpRequest()
        xhr.open('GET','/movies/getAllMovies',true)
        xhr.send()
        xhr.onreadystatechange=()=>{
            if(xhr.readyState==4){
                if(xhr.status==200){
                   resolve(JSON.parse(xhr.responseText))
                }
            }
        }
    })
}